<template>
    <a-form class="login-form">
        <a-form-item label="姓名">
            <a-input v-model:value="registerForm.name"></a-input>
        </a-form-item>

        <a-form-item label="班级">
            <el-cascader v-model="className" :options="options" :props="{
                expandTrigger: 'hover'
            }" :show-all-levels="false" />
        </a-form-item>

        <a-form-item label="学号">
            <a-input v-model:value="registerForm.id"></a-input>
        </a-form-item>

        <a-form-item label="密码">
            <a-input-password v-model:value="registerForm.password"></a-input-password>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" :loading="iconLoading" @click="register">
                注册
            </a-button>
            <!-- 竖直分割线 -->
            <a-divider type="vertical" />
            <RouterLink to="/login">去登录</RouterLink>
        </a-form-item>
    </a-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user';

const className = reactive([])

const options = [
    {
        value: '计算机学院',
        label: '计算机学院',
        children: [
            {
                value: '21-1',
                label: '21计算机科学与技术（1）班',
            }, {
                value: '21-2',
                label: '21计算机科学与技术（2）班',
            }, {
                value: '22-3',
                label: '22计算机科学与技术（1）班',
            },{
                value: '22-3',
                label: '22计算机科学与技术（4）班',
            },
        ]
    },
    {
        value: '外国语学院',
        label: '外国语学院',
        children: [
            {
                value: '21-1',
                label: '21商务英语（1）班',
            }, {
                value: '21-2',
                label: '21商务英语（2）班',
            }, {
                value: '21-3',
                label: '21商务英语（3）班',
            },
        ]
    },
]

const userStore = useUserStore()
const registerForm = reactive({
    id: '',
    password: '',
    name: '',
});
const router = useRouter()
const iconLoading = ref(false);
const register = () => {
    if (registerForm.name.length === 0 || registerForm.id.length === 0 || registerForm.password.length === 0) {
        ElMessage.error('请输入完整信息')
        return
    }
    if (registerForm.id.length > 12) {
        ElMessage.error('学号不能多于12位数')
        return
    }
    iconLoading.value = true
    axios.post(                         
        '/register',
        registerForm
    ).then( 
        res => {
            let data = res.data
            if (data.status === '1') {                                                                          
                iconLoading.value = false
                ElMessage.success(data.msg)
                userStore.id = registerForm.id
                userStore.password = registerForm.password
                router.replace('/login')
            } else {
                iconLoading.value = false
                ElMessage.error(data.msg)
            }
        }
    ).catch(
		() => {
			ElMessage.error('服务器链接失败！')
			iconLoading.value = false
		}
	)
};

</script>










